<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="降雨预警信息"
    :footer="null"
    :width="1000"
    :height="680"
    :canFullscreen="false"
    :destroyOnClose="true"
    wrapClassName="stationPopup"
    @height-change="handleHeightChange"
  >
    <TablePopup :tableDataSource="state.tableDataSource" :tableColumns="state.tableColumns" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, reactive, provide } from 'vue';
  import { BasicModal, useModalInner } from '@gui-pkg/antdcomponents';
  import TablePopup from '@/components/TablePopup';

  const modalHeightValue = ref(680);
  const state = reactive({
    data: null,
    tableColumns: [
      {title: '过程线', key: 'action', width: 80, align: 'center', },
      {title: '序号', dataIndex: 'index', key: 'index', width: 80, align: 'center', },
      {title: '站名', dataIndex: 'stnm', key: 'stnm', width: 200, align: 'center',  },
      {title: '雨量(mm)', dataIndex: 'drp', key: 'drp',  width: 150, align: 'center', sorter: (a, b) => a.drp - b.drp,},
      {title: '站址', dataIndex: 'stlc', key: 'stlc', ellipsis: true, align: 'center' }
    ],
    tableDataSource: [
      { "stcd": 68, "sttp": "PP", "stnm": "石船村", "lgtd": 115.6136022, "lttd": 30.12116849, tm: '06-15 09:10', drp: '134', stlc: 'xxxxxxxx' },
      { "stcd": 139, "sttp": "PP", "stnm": "张冲村", "lgtd": 115.544458, "lttd": 30.04056645, tm: '06-15 09:10', drp: '134', stlc: 'xxxxxxxx'},
      { "stcd": 82, "sttp": "PP", "stnm": "车坊村", "lgtd": 115.7071082, "lttd": 30.11864678, tm: '06-15 09:10', drp: '134', stlc: 'xxxxxxxx' },
      { "stcd": 126, "sttp": "PP", "stnm": "崇山村", "lgtd": 115.4880729, "lttd": 29.9722921, tm: '06-15 09:10', drp: '134', stlc: 'xxxxxxxx' },
      { "stcd": 123, "sttp": "PP", "stnm": "刘叶村", "lgtd": 115.5228198, "lttd": 29.9546735, tm: '06-15 09:10', drp: '134', stlc: 'xxxxxxxx' },
      { "stcd": 168, "sttp": "PP", "stnm": "杨山村", "lgtd": 115.6385102, "lttd": 30.04677856, tm: '06-15 09:10', drp: '134', stlc: 'xxxxxxxx' },
    ]
  });

  const [register, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    state.data = data.record;
  });

  // 弹窗高度变化，主要是监听是否点击了全屏
  const handleHeightChange = (height: string) => {
    modalHeightValue.value = height;
  };
  provide('ModalHeightChange', modalHeightValue);

</script>

<style lang="less" rel="stylesheet/less" scoped>

</style>
